<template>
  <el-card>
    <el-row :gutter="24">
      <el-col :offset="5" :span="10">
        <!-- 搜索添加 -->
        <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getApplicationList">
          <el-button slot="append" icon="el-icon-search" @click="getApplicationList"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <!-- 硬件列表 -->
    <el-table :data="applicationList" border highlight-current-row :row-class-name="tableRowClassName"
              :default-sort="{prop: 'name', order: 'descending'}">
      <el-table-column type="index" fixed></el-table-column>
      <el-table-column label="申请人" fixed prop="applicant" sortable></el-table-column>
      <el-table-column label="申请硬件" fixed prop="hardware"></el-table-column>
      <el-table-column label="用途" prop="purpose"></el-table-column>
      <el-table-column label="申请时间" prop="applyTime" sortable></el-table-column>
      <el-table-column label="开始时间" prop="startTime" sortable></el-table-column>
      <el-table-column label="结束时间" prop="endTime" sortable></el-table-column>
      <el-table-column label="审批人" prop="approver"></el-table-column>
      <el-table-column label="审批意见" prop="opinion"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 审批-->
          <div style="display: flex;justify-content: center">
            <el-button type="primary" icon="el-icon-s-check" size="mini"
                       @click="dialogInit(scope.row.id,scope.row.state,scope.row.applicant,scope.row.hardware)"></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>
    <el-dialog :visible.sync="showDialog" title="申请审批" width="50%">
      审批意见:
      <el-input v-model="opinion" placeholder="请输入审批意见" style="width: 80%"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="approve(1)">同意</el-button>
    <el-button type="primary" @click="approve(-1)">拒绝</el-button>
  </span>
    </el-dialog>
  </el-card>

</template>

<script>
export default {
  name: "Approve",
  data() {
    return {
      // 请求数据
      queryInfo: {
        query: "",
        pageNum: 1,
        pageSize: 5
      },
      id: null,
      user: JSON.parse(localStorage.getItem('user')),
      operator: '',
      showDialog: false,
      hardware: '',
      opinion: '',
      state: 0,
      total: 0, // 最大数据记录
      applicationList: []
    }
  },
  created() {
    this.getApplicationList();
  },
  methods: {
    async getApplicationList() {
      // 调用post请求
      const {data: res} = await this.$http.get("getApplicationList", {
        params: this.queryInfo
      });
      this.applicationList = res.data; // 将返回数据赋值
      this.total = res.total; // 总个数
    },
    // 监听pageSize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getHardwareList(); // 数据发生改变重新申请数据
    },
    // 监听pageNum改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getHardwareList(); // 数据发生改变重新申请数据
    },
    tableRowClassName({row, rowIndex}) {
      if (row.state === 1) {
        return 'warning-row';
      } else if (row.state === 0) {
        return 'success-row';
      } else if (row.state === -1) {
        return 'danger-row';
        return '';
      }
    },
    formatTime: function (row, column) {
      return row.dateProduction.substring(0, 10)
    },
    dialogInit(id, state, operator, hardware) {
      if (state === 0) {
        this.id = id;
        this.operator = operator
        this.hardware = hardware
        this.showDialog = true;
      } else {
        this.$message.error("已被其他管理员审批")
      }
    },
    async approve(state) {
      this.state = state
      let form = new FormData()
      form.set("id", this.id)
      form.set("state", this.state)
      form.set("opinion", this.opinion)
      form.set("operator", this.operator)
      form.set('hardware', this.hardware)
      form.set("approver", this.user.username)
      const {data: res} = await this.$http.post("updateApplication", form)
      console.log(res.code)
      await this.getApplicationList()
      this.showDialog = false
    }

  }

}
</script>
.el-table .warning-row {
background: #fae9ca;
}

.el-table .success-row {
background: #f0f9eb;
}

.el-table .danger-row {
background: #fccfcf;
}
<style scoped>

</style>